﻿@model thailandProject.Models.RESERVATION

@{
    ViewBag.Title = "Edit Client Reservation";
}

<div id="Wrapper2">
    <div id="content_header">
        <div id="headerimage">
        </div>
        <div id="theheader">@ViewBag.Header</div>
    </div>
    <!-- Left Column begins here -->
    <aside id="sidebar-wrapper">
        <nav class="sidebar">
            <!-- CONTENT GOES HERE -->

    @using (Html.BeginForm("EditClientReservation", "Clients", FormMethod.Post, new { id = "editForm" }))
    {
        string value = Model.resIsHeld ? "true" : "false";
        string price = @Model.resQuotedPrice.ToString();
        price = price.Substring(0, price.Length - 2);
        <div class="display-label">Quoted Price &#3647 </div>
        <div class="display-field">
            <input type="hidden" name="resID" value="@Model.resID" />
        </div>
        <div class="display-field">
            
            <input type="text" id="resQuotedPrice" name="resQuotedPrice" value="@price" maxlength="10" />
            <span id="resQuotedPriceError" style="color:red; visibility:hidden;">Invalid Price</span>
        </div>

        <div class="display-label">Dates</div>
        <div class="display-field">
            <div id="searchDates" style="width:100%; margin-top:10px;">
                     <input type="hidden" id="dateFromOrgVal" value="@Model.resDate.ToShortDateString()" />
                     <input type="hidden" id="dateToOrgVal" value="@Model.resEndDate.ToShortDateString()" />
                     <div class="search_box1"> From: <br /><input style="width:85%" type="text" class="datepickerTo" id="dateFrom" name="dateFrom" value="@Model.resDate.ToShortDateString()" readonly="true" /></div>
                     <div class="search_box2"> To: <br /><input style="width:85%" type="text" class="datepickerFrom" id="dateTo" name="dateTo" value="@Model.resEndDate.ToShortDateString()" readonly="true" /></div>
            </div>
        </div>

        <div class="display-label">Reservation is On Hold</div>
        <div class="display-field">
            <span>
                <input type="hidden" id="precheck" value="@value" />
                <input id="resIsHeld" name="resIsHeld" type="hidden" value="@value" />
                <img class="hideCompleted_checkbox" src="../../images/checkedBlue.png" id="checkbox" style="width:1.4em;"/>
                <img src="../../images/unchecked.png" id="image_preload" style="width:1.4em; visibility:hidden;"/>   
            </span>
        </div>
        
        <div class = "formButtons">
        <input type="image" src="../../images/cancel_button.png" id="delete" name="submitBtn" value="Delete" />
        <input type="image" src="../../images/save_button.png" id="submitEdit" name="submitBtn" value="Save" />
        <input type="hidden" id="formcheck" value="false" />
        </div>
        <div id="formError" style="color:red; visibility:hidden;">Please correct the above errors.</div>
    }

<p>
    @Html.ActionLink("Back", "ViewClient", new { clientId = Model.clientID })
</p>

            
        </nav>
    </aside>
    <!-- Right column begins here -->
    <article id="contents">
        
    </article>
    <!-- Right column ends here -->
</div>
<!-- Div wrapper2 ends here -->

<script>
    $(function () {
        if ($("#precheck").val() == "false") {
            $("#checkbox").attr('src', '../../images/unchecked.png');
        }
    });

    $(".hideCompleted_checkbox").click(function () {
        var indicator = 0;
        var this_id = $(this).attr('id');
        //alert(this_id);
        if ($(this).attr('src') == '../../images/unchecked.png') {
            $(this).attr('src', '../../images/checkedBlue.png');
            $("#resIsHeld").val('true');
            indicator = 1;
        }
        else {
            $(this).attr('src', '../../images/unchecked.png');
            $("#resIsHeld").val('false');
            indicator = 0;
        }
    })

    $("#resQuotedPrice").keyup(function() {
        //Determine if the price is valid
        var price = $(this).val();
        
        if (isNaN(price) || price == "" || price.indexOf(' ') != -1 || price < 0)
            $("#resQuotedPriceError").attr('style', 'color:red; visibility:visible;');
        else
            $("#resQuotedPriceError").attr('style', 'color:red; visibility:hidden;');
    })

    $("#editForm").submit(function () {

        var button = $("input[type=image][clicked=true]").val();

        if (button == "Save") {
            //Determine if the price is valid
            var price = $("#resQuotedPrice").val();

            if (isNaN(price) || price == "" || price.indexOf(' ') != -1 || price < 0) {
                $("#submitEdit").attr('clicked', 'false');
                $("#resQuotedPriceError").attr('style', 'color:red; visibility:visible;');
                $("#formError").attr('style', 'color:red; visibility:visible;');
                $("#resQuotedPrice").focus();
                return false;
            }
            else {
                $("#resQuotedPriceError").attr('style', 'color:red; visibility:hidden;');
                $("#formError").attr('style', 'color:red; visibility:hidden;');

                if ($("#dateFromOrgVal").val() != $("#dateFrom").val() ||
                    $("#dateToOrgVal").val() != $("#dateToOrgVal").val()) {
                    if (confirm("You have changed the reservation dates.\n\nThis will not verify that the apartment is not double-booked. Are you sure?")) {
                        if ($("#formcheck").val() == 'false') {
                            $("#formcheck").val('true');
                            return true;
                        }
                        else {
                            alert('Your action is currently being processed. Please wait');
                            return false;
                        }
                    }
                    else {
                        return false;
                    }
                }
                else
                {
                    if ($("#formcheck").val() == 'false') {
                        $("#formcheck").val('true');
                        return true;
                    }
                    else {
                        alert('Your action is currently being processed. Please wait');
                        return false;
                    }
                }
            }
        }
        else {
            //Show confirmation dialogue
            if (confirm("Are you sure?\n\nThis will also delete all associated tasks and payments")) {
                if ($("#formcheck").val() == 'false') {
                    $("#formcheck").val('true');
                    return true;
                }
                else {
                    alert('Your action is currently being processed. Please wait');
                    return false;
                }
            }
            else {
                $("#delete").attr('clicked', 'false');
                return false;
            }
        }
    })

    $("form input[type=image]").click(function () {
        $("input[type=image]", $(this).parents("form")).removeAttr("clicked");
        $(this).attr("clicked", "true");
    });
</script>